<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="jquery-3.6.0.js"></script>
		<meta charset="utf-8">
		<title></title>
		<style>
			#text{
				font-size: 30px;
			}
			.con {
				text-align: center;
			}
		</style>
		<script type="text/javascript">
			var judge=1;
			function off_on(){
				if(judge!=0){
					$("#img").attr("src","on.png");
					$("#text").html("灯亮了!");
					$("#text").css("color","red");
					judge=0;
				} else{
					$("#img").attr("src","off.png");
					$("#text").html("灯灭了!");
					$("#text").css("color","black");
					judge=1;
				}
			}
		</script>
	</head>
	<body>
		<div class="con">
			<img src="off.png" id="img" onclick="off_on()" height="200" width="200"/>
			<div id="text">灯灭了!</div>
		</div>
	</body>
</html>